<%--
  Created by IntelliJ IDEA.
  User: linzhihan
  Date: 2022/11/28
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>电影选座</title>
    <style>
        .color-self{
            display: block;
            width: 100px !important;
            margin-top: 30px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            font-size: 20px;
            color: white;
            background-color: #1b6d85;
        }
        #total{
            color: red;
        }

    </style>
    <base href="http://localhost:8080/demo/">
    <link rel="stylesheet" href="css/jquery.seat-charts.css">
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="js/jquery.seat-charts.js"></script>
    <script type="text/javascript" src="js/jquery.seat-charts.min.js"></script>
    <script type="text/javascript">

        var price =80; //票价
        $(document).ready(function() {
             price=$("#proPrice").val();
            var $cart = $('#selected-seats'), //座位区
                $counter = $('#counter'), //票数
                $total = $('#total'); //总计金额

            var sc = $('#seat-map').seatCharts({
                map: [  //座位图
                    'aaaaaaaaaa',
                    'aaaaaaaaaa',
                    '__________',
                    'aaaaaaaa__',
                    'aaaaaaaaaa',
                    'aaaaaaaaaa',
                    'aaaaaaaaaa',
                    'aaaaaaaaaa',
                    'aaaaaaaaaa',
                    'aa__aa__aa'
                ],
                legend : { //定义图例
                    node : $('#legend'),
                    items : [
                        [ 'a', 'available',   '可选座' ],
                        [ 'a', 'unavailable', '已售出']
                    ]
                },
                click: function () { //点击事件
                    if (this.status() == 'available') { //可选座
                        $('<li>'+(this.settings.row+1)+'排'+this.settings.label+'座</li>')
                            .attr('id', 'cart-item-'+this.settings.id)
                            .data('seatId', this.settings.id)
                            .appendTo($cart);

                        $counter.text(sc.find('selected').length+1);
                        $total.text((sc.find('selected').length+1)*price);

                        return 'selected';
                    } else if (this.status() == 'selected') { //已选中
                        //更新数量
                        $counter.text(sc.find('selected').length-1);
                        //更新总计
                        $total.text((sc.find('selected').length-1)*price);

                        //删除已预订座位
                        $('#cart-item-'+this.settings.id).remove();
                        //可选座
                        return 'available';
                    } else if (this.status() == 'unavailable') { //已售出
                        return 'unavailable';
                    } else {
                        return this.style();
                    }
                }
            });
            //已售出的座位
            sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');

        });

    </script>
</head>
<body>

<div class="demo">
    <div id="seat-map">
        <div class="front">屏幕</div>
    </div>

    <div class="booking-details">

        <input type="hidden" id="proPrice" value="${product.proPrice}">
        <input type="hidden" id="proId" value="${product.proId}">
            <p>影片：<span id="proName">${product.proName}</span></p>
            <p>时间：<span>12月30日 20:00</span></p>
            <p>座位：</p>
            <ul id="selected-seats"></ul>
            <p>票数：<span id="counter">0</span></p>
            <p>总计：<b>￥<span id="total">0</span></b></p>
            <button class="checkout-button color-self">确定购买</button>
            <div id="legend"></div>


    </div>
</div>
<%--发起请求--%>
<script>

    $(".checkout-button").click(function (){
        //获取参数
       var proId = $("#proId").val();
       var proPrice = $("#total").text();
       //表单验证
        if(proPrice==0){
            alert("请选择座位")
            return;
        }

        console.log("http://localhost:8080/demo/order/"+proId+"/"+proPrice);
         //发起请求
        window.location.href="http://localhost:8080/demo/order/"+proId+"/"+proPrice;

    })

</script>

</body>
</html>
